<template>
  <el-dialog
    :visible="visible"
    :mask-closable="false"
    :width="width+'mm'"
    @close="hideModal"
  >
    <div id="preview_content" />
    <template slot="title">
      <div style="margin-right: 20px">打印预览</div>
      <el-button type="primary" icon="printer" @click.stop="print">打印</el-button>
      <el-button type="primary" icon="printer" @click.stop="toPdf">pdf</el-button>
    </template>
    <template slot="footer">
      <el-button key="close" type="info" @click="hideModal">
        关闭
      </el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: 'PrintPreview',
  props: {},
  data() {
    return {
      visible: false,
      spinning: true,
      waitShowPrinter: false,
      // 纸张宽 mm
      width: 0,
      // 模板
      hiprintTemplate: {},
      // 数据
      printData: {}
    };
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    hideModal() {
      this.visible = false;
    },
    show(hiprintTemplate, printData, width = '210') {
      this.visible = true;
      this.spinning = true;
      this.width = Number(width) + 20;
      this.hiprintTemplate = hiprintTemplate;
      this.printData = printData;
      setTimeout(() => {
        // eslint-disable-next-line no-undef
        $('#preview_content').html(hiprintTemplate.getHtml(printData));
        this.spinning = false;
      }, 500);
    },
    print() {
      this.hiprintTemplate.print(this.printData, {}, {
        styleHandler: () => {
          let css = '<link href="http://hiprint.io/Content/hiprint/css/print-lock.css" media="print" rel="stylesheet">';
          return css;
        },
        callback: () => {
          console.log('callback');
        }
      });
    },
    toPdf() {
      this.hiprintTemplate.toPdf({}, '打印预览');
    }
  }
};

</script>
<style lang="scss" scoped>
::v-deep.el-dialog__body {
  padding: 0px;
}

</style>
